<template>
  <div class="my-tag">
     <div>
          <!-- v-focus -->
        <input 
          v-if="isShow"
          v-model="value"
          ref="refInput"
          @keydown.enter="enter"
          @keyup.esc="isShow = false"
          @blur="isShow = false"
          type="text" 
          placeholder="输入任务"
        >
        <div v-else @click="add" class="spanlist" >+&nbsp;New Tag</div>
        <div  v-for="(item) in list" :key="item.id">
          <div class="spanlist">
            <span >{{ item.name }}</span>
            <button @click="del(item.id)">x</button>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      idIndex: +new Date(),
      isShow: false,
      list: [
        { id: 1, name: '跑步一公里' },
        { id: 2, name: '打球一小时' },
        { id: 3, name: '游泳100米' },
      ]
    }
  },
  mounted() {
    
  },
  methods :{
    enter(){
       this.list.push({
        name:this.value,
        id:this.idIndex
       })
       this.value = ''
       this.isShow = false
    },
    add () {
      this.isShow = true
      this.$refs.refInput.focus()
    },
    del (id) {
      this.list = this.list.filter(item => item.id !== id)
    }
  }
}
</script>

<style lang="less" scoped>
.my-tag{
  .spanlist{
    padding: 5px 10px;
    display:inline-block;
    border: 1px solid #fb7299 ;
    border-radius: 5px;
  }
  button {
    margin-left: 10px;
    border-style:none;
    background-color: transparent;
  }

}
</style>